<template>
  <div class="container">
    <h1 style="margin-top:200px;font-weight:bold;">学生信息管理</h1>
    <ol class="breadcrumb" style="background:white">
      <li class="breadcrumb-item">
        <router-link to="/">登录</router-link>
      </li>
      <li class="breadcrumb-item">
        <router-link to="/register" style="color:#111111">注册</router-link>
      </li>
    </ol>
    <div class="alert alert-danger" v-if="falseMsg != ''">
      <strong>{{falseMsg}}</strong>
    </div>
    <form class="form-box">
      <div class="form-group">
        <label for="uname">用户名:</label>
        <input type="uname" class="form-control" id="uname" placeholder="输入用户名">
      </div>
      <div class="form-group">
        <label for="pwd">密码:</label>
        <input type="password" class="form-control" id="pwd" placeholder="输入密码">
      </div>
      <button type="submit" class="btn btn-primary" @click="toLogin">登录</button>
    </form>
  </div>
</template>
<script>
import {loginFunction} from '../api/loginJS'
export default {
  name:'login',
  data() {
    return {
      falseMsg:''
    }
  },
  methods: {
    toLogin(){
      var uname = $('#uname').val()
      var upass = $('#pwd').val()
      if(uname == ''){
        // alert('用户名不能为空！')
        this.falseMsg = '用户名不能为空！'
      }
      else if(upass == ''){
        // alert('密码不能为空！')
        this.falseMsg = '密码不能为空！'
      }
      else{
        loginFunction(uname,upass).then(res => {
          // console.log(res.data.success)
          if(res.data.success == true){
            // console.log(res.data)
            this.$router.push({
              path:'/index',
              query:{
                token: res.data.data
              }
            })
          }else{
            // this.isLoginFalse = true
            // alert(res.data.data.msg)
            this.falseMsg = res.data.data.msg
          }
        })
      }
    }
  },
}
</script>
<style>
.form-box{
  width: 500px;
  margin-top: 10px;
}
</style>